<template>
  <div id="app">
    <Search @getItem="getItem"></Search>
    <List>
      <ul slot="ul_li" v-for="(item,index) in data_arr" :key="index">
        <li><img :src="item.owner.avatar_url" alt=""></li>
        <li>{{item.id}}</li>
        <li>{{item.name}}</li>
      </ul>
    </List>
  </div>
</template>

<script>
import Search from "./components/Search.vue";
import List from "./components/List.vue";
export default {
  name: "App",
  msg:"",
  data() {
    return {
      data_arr: [],
    };
  },
  components: {
    List,
    Search,
  },
  methods:{
   async getItem(item){
      this.msg=item
       if (this.msg) {
         const url = `https://api.github.com/search/repositories?q=${this.msg}&sort=stars`;
      
      // 处理异常
      try {
        let response = await this.$http.get(url);
        console.log(response.body.items);
        this.data_arr=response.body.items
      } catch (err) {
        // 处理失败情况
        console.log(err);
      }
    }else{
       const url = "https://api.github.com/search/repositories?q=v&sort=stars";
      // 处理异常
      try {
        let response = await this.$http.get(url);
        console.log(response.body.items);
        this.data_arr=response.body.items
      } catch (err) {
        // 处理失败情况
        console.log(err);
      }
    }
    }
  },
  async mounted() {
    
      const url = "https://api.github.com/search/repositories?q=v&sort=stars";
      // 处理异常
      try {
        let response = await this.$http.get(url);
        console.log(response.body.items);
        this.data_arr=response.body.items
      } catch (err) {
        // 处理失败情况
        console.log(err);
      }
   
  },
};
</script>

<style lang="less" scoped>
</style>